<!--  业务审核单 -->
<template>
<div class="businesscheckform">

  <div class="head">
    <h2>业务审核单</h2>
    <div class="head-ctrl">
      <div class="order-number">
        {{businessformNO}}
      </div>
      <!-- <el-button :disabled="!editable" type="primary">导出</el-button> -->
    </div>
  </div>


  <div class="table">
    <el-table :data="tableData"  border style="width: 100%">
      <el-table-column label="产品名称" min-width="100">
        <template slot-scope="scope">
          <span  class="cell-edit-input">
            <el-input  :readonly="!editable" v-model="scope.row.bb_productName" ></el-input>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="产品功能" min-width="100">
        <template slot-scope="scope">
          <span  class="cell-edit-input">
            <el-input  :readonly="!editable" v-model="scope.row.bb_productFunction" ></el-input>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="产品用途" min-width="100">
        <template slot-scope="scope">
          <span  class="cell-edit-input">
            <el-input  :readonly="!editable" v-model="scope.row.bb_productUse" ></el-input>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="是否品牌" min-width="100">
        <template slot-scope="scope">
          <span  class="cell-edit-input">
            <el-input  :readonly="!editable" v-model="scope.row.bb_hasBrand" ></el-input>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="产品HS编码" min-width="100">
        <template slot-scope="scope">
          <span  class="cell-edit-input">
            <el-input  :readonly="!editable" v-model="scope.row.bb_productCode" ></el-input>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="出口国家" min-width="100">
        <template slot-scope="scope">
          <span  class="cell-edit-input">
            <el-input  :readonly="!editable" v-model="scope.row.bb_exportCountry" ></el-input>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="工厂资质" min-width="100">
        <template slot-scope="scope">
          <span  class="cell-edit-input">
            <el-input  :readonly="!editable" v-model="scope.row.bb_qualification" ></el-input>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="是否商检" min-width="100">
        <template slot-scope="scope">
          <span  class="cell-edit-input">
            <el-input  :readonly="!editable" v-model="scope.row.bb_needCheck" ></el-input>
          </span>
        </template>
      </el-table-column>

      <el-table-column label="其他需求" min-width="100">
        <template slot-scope="scope">
          <span  class="cell-edit-input">
            <el-input  :readonly="!editable" v-model="scope.row.bb_otherNeed" ></el-input>
          </span>
        </template>
      </el-table-column>

      <el-table-column
      v-if="editable"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="addNewLine(scope.$index, data.bb_table1)" type="text" size="small">添加</el-button>
        <el-button @click="removeCurrentLine(scope.$index, data.bb_table1)" type="text" size="small">移除</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>

  <div class="upload">
    <p class="upload-hint">票据/附件</p>
    <div>
      <div class="upload-btn">
        <input v-show="editable" type="file" multiple @change="selectFiles">
        <el-button :disabled="!editable" type="primary">选择附件</el-button>
      </div>

      <ul class="upload-files">
        <li @mouseover="handleOver(item)"  :key="index" @mouseout="handleOut(item)" v-for="(item,index) in data.attachedFiles">
          <span @click="download(item.id, $event)">{{item.name}}</span>
          <span v-if="editable && item.status" class="el-icon-circle-check" style="color:#67c23a;"></span>
          <span v-else-if="editable" class="el-icon-circle-close" @click="changeFiles(index,item)" style="color:red;"></span>
        </li>
      </ul>
    </div>
  </div>


</div>
</template>

<script>

import {uploadFiles} from '@/server/initiatingprocess';
import {filedownload,deleteFile} from '@/server/customermanagement'


export default {
  created() {
  },
  updated() {
  },
  mounted(){
  },
  data() {
    return {
    }
  },

  computed: {
    tableData(){
      return this.data.bb_table1;
    }
  },
  props: {
    formId: {
      type: String,
      required: true
    },
    businessformNO: {
      type: String,
      required: true,
    },
    data: {
      type: Object,
      required: true
    },
    editable: {
      type: Boolean,
      required: true
    }
  },
  methods: {
    selectFiles(event) {
      //票据附件
      let _this = this;


      //直接上传，并且获得后端返回的文件的url,将url保存到 this.data.attachedFiles中
      uploadFiles(event.target.files).then((resArr)=>{
        resArr.forEach(function(res,i){
          _this.data.attachedFiles.push({name: event.target.files[i].name, status: 1, id: res.data.datas[0].id});
        });
        _this.$forceUpdate();
      });

    },
    changeFiles(index,item) {

      deleteFile({id: item.id}).then((res) => {
        if(res.code != 1 ){
          this.$message.error('删除失败，请检查网络后重试');
        } else {
          this.data.attachedFiles.splice(index, 1);
        }
      });
    },
    handleOver(item){
      item.status = 0;
      this.$forceUpdate();
    },
    handleOut(item){
      item.status = 1;
      this.$forceUpdate();
    },
    download(id, event){
      window.open('http://47.104.93.41/api/common/download?id='+id);

    },

    addNewLine(currentIndex, table){
      let newLine = _.cloneDeep(table[currentIndex]);

      // for (let prop in newLine) {
      //   newLine[prop] = '';
      // }

      table.splice(currentIndex + 1, 0, newLine);
      this.$forceUpdate();
    },
    removeCurrentLine(currentIndex, table){
      if (table.length > 1){
        table.splice(currentIndex, 1);
        this.$forceUpdate();
      }
    },
  }
}
</script>

<style lang="scss">
.businesscheckform {
    padding: 20px;
    border: 1px solid #999;


    td {
      border: 1px solid #e6ebf5;
    }

    .el-table thead.is-group th {
      background: #e6e6e6;
    }

    .el-table--border td,
    .el-table--border th {
        border: 1px solid #e6ebf5;
    }

    .el-input__inner {
        border: none;
        background: transparent;
        padding: 0;
        text-align: center;
    }

    .head {
        h2 {
            text-align: center;
        }

        .head-ctrl {
            height: 60px;
            .order-number {
                padding: 16px 0;
                float: left;
            }
            button {
                float: right;
            }
        }
    }

    .table {
      margin: 20px 0px;
    }

    .upload {
        > div {
            border: 1px solid #999;
            padding: 20px 0 40px 20px;
        }

        .upload-btn {
            position: relative;
            > input {
                opacity: 0;
                width: 100px;
                height: 40px;
                position: absolute;
                top: 0;
                left: 0;
            }
        }

        .upload-files {

            > li {
                width: 300px;
                padding: 10px 0;
                transition: all 0.5s linear;

                &:hover {

                  >span {
                    color: #409EFF;
                  }
                }
              }

            font-size: 16px;
            span {
                padding: 0 10px;
                cursor: pointer;
                display: inline;
            }
            span.el-icon-close:hover {
                cursor: pointer;
            }
        }
        .upload-hint {
            font-size: 20px;
            margin-bottom: 10px;
        }
    }
}
</style>
